<template>
<!-- 使用外壳组件 -->
  <waike title="sort">
    <template #tab_slot>
      <!-- 顶部导航栏v-model="activeName"-->
      <van-tabs @click="active_sort($event)" class="index-tabs" v-model="active_tab" swipeable>
        <van-tab title="关注" name="attention"></van-tab>
        <van-tab title="推荐" name="recommend"></van-tab>
        <van-tab title="分类" name="sort"></van-tab>
      </van-tabs>
    </template>
      <template>
      <!-- 下方内容 -->
      <div class="sort">
        <p class="font">厨房活动</p>
        <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item>
              <!--<span class="swipe_text">比乐事哪里都不差的「炸薯片</span> -->
              <img src="../assets/images/download10.jpg" class="swipe_img">
            </van-swipe-item>
            <van-swipe-item>
              <!-- <span class="swipe_text">网红轻乳酪蛋糕...</span> -->
              <img src="../assets/images/download2.jpg" alt="" class="swipe_img">
            </van-swipe-item>
            <van-swipe-item>
              <!-- <span class="swipe_text">完美复刻达美乐!!</span> -->
              <img src="../assets/images/download7.jpg" alt="" class="swipe_img">
            </van-swipe-item>
        </van-swipe>

        <!-- 人气榜单 -->
        <p class="font">人气榜单</p>
        <van-grid :gutter="10">
          <van-grid-item v-for="(item,i) in pop_res" :key="i">
            <img :src="item.pic" alt="" style="width:100%;height:2.7rem;">
            <span style="margin-top: 0.3rem;">{{item.context}}</span>
          </van-grid-item> 
        </van-grid>
         <!--热门分类  -->
         <p class="font" style="margin-top:8%;" >热门分类</p>
         <van-grid :gutter="10">
          <van-grid-item v-for="(item,i) in hot_res" :key="i">
            <img :src="item.pic" alt="" style="width:100%">
            <span style="margin-top: 0.3rem;">{{item.context}}</span>
          </van-grid-item>
        </van-grid>
        <!-- 特色分类 -->
        <p class="font" style="margin-top:8%;" >特色分类</p>
         <van-grid :gutter="10">
          <van-grid-item v-for="(item,i) in sp_res" :key="i">
            <img :src="item.pic" alt="" style="width:100%">
            <span style="margin-top: 0.3rem;">{{item.context}}</span>
          </van-grid-item>
        </van-grid>
        <!-- 底部导航 -->
        <van-tabbar v-model="active_bar" active-color="#ee0a24">
        <van-tabbar-item name="home" icon="home-o" to="/">首页</van-tabbar-item>
        <van-tabbar-item name="collection" icon="star-o" to="/collection">收藏</van-tabbar-item>
        <van-tabbar-item name="me" icon="friends-o" to="/me">我的</van-tabbar-item>
        </van-tabbar>
    </div>
    </template>
  </waike>
</template>
<script>
//引入外壳组件
import waike from "../components/waike.vue";
export default {
  components:{waike},
  data(){
    return {
      active_tab:"sort",
      active_bar:'home',
      pop_res:[],
      hot_res:[],
      sp_res:[],
      pic:""
    }
  },
  methods:{
    active_sort(e){
      if(e=="recommend"){
        // this.activeName="recommend";
        this.$router.push("/");
      }else if(e=="attention"){
        // this.activeName="sort";
        this.$router.push("/attention");
      }
    },
    // 封装查询分类列表的方法
    loadArticles(subject_id,callback){
      this.axios.get(
        `/article/sort/${subject_id}`).then(result=>{
        // console.log(result);
        let articles = result.data.result;
        callback(articles);
      })
    },

  },
  mounted(){
   this.loadArticles(1,(list)=>{
      this.pop_res = list;
    });
    this.loadArticles(2,(list)=>{
      this.hot_res=list;
    });
    this.loadArticles(3,(list)=>{
      this.sp_res=list;
    });
  },
}
</script>
<style scoped>
/* 轮播图 */
.my-swipe{
    border-radius: 0.3rem;
    width: 94%;
    height: 13rem;
    margin-left: 3%;
    margin-bottom: 0.6rem;
    position: relative;
}
.swipe_img{
  width:100%; height:100%;
  object-fit:cover;
}
.swipe_text{
  position: absolute; top: 1.5rem; left: 1rem;
  font-size: 18px; font-weight: 600;
  color: white; text-shadow: 1px 1px 1px #333;
}
.van-grid-item__content{
  padding: 10px 8px;
}
/* 字体 */
.font{
  margin-bottom: 0.6rem;
  margin-right:75%;
  font-size:15px;
  font-weight:700;
  margin-top: 0;
}
</style>